﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="fontAwesome/font-awesome.css" />
	<style type="text/css">
	body{
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	background: #fff url(bg.jpg) repeat top left;
	font-weight: 400;
	font-size: 15px;
	color: #1d3c41;
	width: 600px;
	margin: 10px auto;
}
a{
	color: #333;
	text-decoration: none;
}
header{
	padding: 20px 30px 10px 30px;
	margin: 0px 20px 10px 20px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
header h1{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 35px;
	line-height: 35px;
	position: relative;
	font-weight: 400;
	color: rgba(26,89,120,0.9);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    padding: 0px 0px 5px 0px;
}
header h1 span{
	color: #7cbcd6;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
nav{
	text-align:center;
	display: block;
	padding: 14px;
}
nav a,
nav a.current-demo,
nav a.current-demo:hover{
    display: inline-block;
	font-style: italic;
	font-size: 12px;
	padding: 3px 5px;
	margin:5px 3px;
	font-weight: 800;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.05) inset;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	background: rgba(104,171,194,0.5);
}
nav a:hover{
	background: #4fa2c4;
}
nav a.current-demo,
nav a.current-demo:hover{
	color: rgba(104,171,194,1);
	background: rgba(255,255,255,0.9);
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
}
section {
	margin-top: 20px;
}
	@font-face {
    font-family: "MuseoSans";
    font-style: normal;
    font-weight: normal;
    src: url("fontAwesome/font/museosans_300-webfont.eot") format("embedded-opentype"), 
		url("fontAwesome/font/museosans_300-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "MuseoSans";
    font-style: normal;
    font-weight: bold;
    src: url("fontAwesome/font/museosans_500-webfont.eot") format("embedded-opentype"), 
		url("fontAwesome/font/museosans_500-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "MuseoSlab";
    font-style: normal;
    font-weight: normal;
    src: url("fontAwesome/font/museo_slab_300-webfont.eot") format("embedded-opentype"),
		url("fontAwesome/font/museo_slab_300-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "MuseoSlab";
    font-style: normal;
    font-weight: bold;
    src: url("fontAwesome/font/museo_slab_500-webfont.eot") format("embedded-opentype"), 
		url("fontAwesome/font/museo_slab_500-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("fontAwesome/font/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), 
		url("fontAwesome/font/fontawesome-webfont.woff") format("woff"), 
		url("fontAwesome/font/fontawesome-webfont.ttf") format("truetype"), 
		url("fontAwesome/font/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), 
		url("fontAwesome/font/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");
}
[class^="icon-"], [class*=" icon-"] {
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    display: inline;
    height: auto;
    line-height: inherit;
    vertical-align: baseline;
    width: auto;
}
li[class^="icon-"], li[class*=" icon-"] {
    display: block;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
a [class^="icon-"], a [class*=" icon-"] {
    display: inline-block;
    text-decoration: inherit;
}
.icon-large:before {
    font-size: 1.33333em;
    vertical-align: top;
}
.btn [class^="icon-"], .btn [class*=" icon-"] {
    line-height: 0.9em;
}
li [class^="icon-"], li [class*=" icon-"] {
    display: inline-block;
    text-align: center;
    width: 1.25em;
}
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
    width: 1.875em;
}
li[class^="icon-"], li[class*=" icon-"] {
    list-style-type: none;
    margin-left: 0;
}
li[class^="icon-"]:before, li[class*=" icon-"]:before {
    text-align: center;
    text-indent: -2em;
}
li.icon-large[class^="icon-"]:before, li.icon-large[class*=" icon-"]:before {
    text-indent: -1.33333em;
}
.the-icons li[class^="icon-"]:after, .the-icons li[class*=" icon-"]:after {
    content: attr(class);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
}
.span3 {
	float: left;
	width: 200px;
}
.row {
	width: 600px;
	margin: 0 auto;
}
	</style>
</head>
<body>
	<header>
		<h1>Web Font Icon</h1>
		<nav>
			<a href="index.html" class="current-demo">Guifx</a>
			<a href="demo2.html">Websymbols</a>
			<a href="demo3.html" class="current-demo">FontAwesome</a>
		</nav>
	</header>
	<section class="row" id="base-icons">
    <div class="span3">
      <ul class="the-icons">
        <li class="icon-glass"></li>
        <li class="icon-music"></li>
        <li class="icon-search"></li>
        <li class="icon-envelope"></li>
        <li class="icon-heart"></li>
        <li class="icon-star"></li>
        <li class="icon-star-empty"></li>
        <li class="icon-user"></li>
        <li class="icon-film"></li>
        <li class="icon-th-large"></li>
        <li class="icon-th"></li>
        <li class="icon-th-list"></li>
        <li class="icon-ok"></li>
        <li class="icon-remove"></li>
        <li class="icon-zoom-in"></li>
        <li class="icon-zoom-out"></li>
        <li class="icon-off"></li>
        <li class="icon-signal"></li>
        <li class="icon-cog"></li>
        <li class="icon-trash"></li>
        <li class="icon-home"></li>
        <li class="icon-file"></li>
        <li class="icon-time"></li>
        <li class="icon-road"></li>
        <li class="icon-download-alt"></li>
        <li class="icon-download"></li>
        <li class="icon-upload"></li>
        <li class="icon-inbox"></li>
        <li class="icon-play-circle"></li>
        <li class="icon-repeat"></li>
      </ul>
    </div>
    <div class="span3">
      <ul class="the-icons">
        <li class="icon-refresh"></li>
        <li class="icon-list-alt"></li>
        <li class="icon-lock"></li>
        <li class="icon-flag"></li>
        <li class="icon-headphones"></li>
        <li class="icon-volume-off"></li>
        <li class="icon-volume-down"></li>
        <li class="icon-volume-up"></li>
        <li class="icon-qrcode"></li>
        <li class="icon-barcode"></li>
        <li class="icon-tag"></li>
        <li class="icon-tags"></li>
        <li class="icon-book"></li>
        <li class="icon-bookmark"></li>
        <li class="icon-print"></li>
        <li class="icon-camera"></li>
        <li class="icon-font"></li>
        <li class="icon-bold"></li>
        <li class="icon-italic"></li>
        <li class="icon-text-height"></li>
        <li class="icon-text-width"></li>
        <li class="icon-align-left"></li>
        <li class="icon-align-center"></li>
        <li class="icon-align-right"></li>
        <li class="icon-align-justify"></li>
        <li class="icon-list"></li>
        <li class="icon-indent-left"></li>
        <li class="icon-indent-right"></li>
        <li class="icon-facetime-video"></li>
        <li class="icon-picture"></li>
      </ul>
    </div>
    <div class="span3">
      <ul class="the-icons">
        <li class="icon-pencil"></li>
        <li class="icon-map-marker"></li>
        <li class="icon-adjust"></li>
        <li class="icon-tint"></li>
        <li class="icon-edit"></li>
        <li class="icon-share"></li>
        <li class="icon-check"></li>
        <li class="icon-move"></li>
        <li class="icon-step-backward"></li>
        <li class="icon-fast-backward"></li>
        <li class="icon-backward"></li>
        <li class="icon-play"></li>
        <li class="icon-pause"></li>
        <li class="icon-stop"></li>
        <li class="icon-forward"></li>
        <li class="icon-fast-forward"></li>
        <li class="icon-step-forward"></li>
        <li class="icon-eject"></li>
        <li class="icon-chevron-left"></li>
        <li class="icon-chevron-right"></li>
        <li class="icon-plus-sign"></li>
        <li class="icon-minus-sign"></li>
        <li class="icon-remove-sign"></li>
        <li class="icon-ok-sign"></li>
        <li class="icon-question-sign"></li>
        <li class="icon-info-sign"></li>
        <li class="icon-screenshot"></li>
        <li class="icon-remove-circle"></li>
        <li class="icon-ok-circle"></li>
        <li class="icon-ban-circle"></li>
      </ul>
    </div>
    <div class="span3">
      <ul class="the-icons">
        <li class="icon-arrow-left"></li>
        <li class="icon-arrow-right"></li>
        <li class="icon-arrow-up"></li>
        <li class="icon-arrow-down"></li>
        <li class="icon-share-alt"></li>
        <li class="icon-resize-full"></li>
        <li class="icon-resize-small"></li>
        <li class="icon-plus"></li>
        <li class="icon-minus"></li>
        <li class="icon-asterisk"></li>
        <li class="icon-exclamation-sign"></li>
        <li class="icon-gift"></li>
        <li class="icon-leaf"></li>
        <li class="icon-fire"></li>
        <li class="icon-eye-open"></li>
        <li class="icon-eye-close"></li>
        <li class="icon-warning-sign"></li>
        <li class="icon-plane"></li>
        <li class="icon-calendar"></li>
        <li class="icon-random"></li>
        <li class="icon-comment"></li>
        <li class="icon-magnet"></li>
        <li class="icon-chevron-up"></li>
        <li class="icon-chevron-down"></li>
        <li class="icon-retweet"></li>
        <li class="icon-shopping-cart"></li>
        <li class="icon-folder-close"></li>
        <li class="icon-folder-open"></li>
        <li class="icon-resize-vertical"></li>
        <li class="icon-resize-horizontal"></li>
      </ul>
    </div>
		<div class="span3">
			<ul class="the-icons">
        <li class="icon-camera-retro"></li>
        <li class="icon-bar-chart"></li>
        <li class="icon-cogs"></li>
        <li class="icon-external-link"></li>
        <li class="icon-pushpin"></li>
        <li class="icon-facebook-sign"></li>
        <li class="icon-twitter-sign"></li>
        <li class="icon-linkedin-sign"></li>
        <li class="icon-github-sign"></li>
        <li class="icon-key"></li>
        <li class="icon-thumbs-up"></li>
        <li class="icon-thumbs-down"></li>
        <li class="icon-comments"></li>
        <li class="icon-trophy"></li>
        <li class="icon-upload-alt"></li>
        <li class="icon-signin"></li>
        <li class="icon-signout"></li>
        <li class="icon-star-half"></li>
        <li class="icon-heart-empty"></li>
        <li class="icon-lemon"></li>
      </ul>
		</div>
  </section>
</body>
</html>